<template>
	<view>
		<view class="headerBgView">
			<image :style="[randomColor(2)]" class="selectedImageView" :src="iconList[selectedIndex]" mode="aspectFill">
			</image>
			<view class="headerActionBgView">
				<view class="titleView">
					{{iconDetailInfo.title}}
				</view>
				<view class="shareBgView" @click="previewImg()">
					<image src="../../static/detail/ic_wechat.png" mode=""></image>
					<view class="shareTitle">
						发送表情
					</view>
				</view>
				<view class="saveAndStoreView">
					<view class="storeImageView">
						<button class="shareBtnView" openType="share"></button>
						<image src="../../static/icon/share.png">
						</image>
					</view>
					<view class="saveImageView" @click="saveHttpImg(iconList[selectedIndex])">
						<image src="../../static/detail/ic_save.png" mode=""></image>
						保存
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true">
			<view class="iconListBgView">
				<view @click="tapSelectedIcon(index)" style="position: relative;" v-for="(item,index) in iconList"
					:key="index">
					<image v-if="selectedIndex == index" style="border: 2px solid #FBD944;" :src="item"
						class="iconImageView" mode="aspectFill">
					</image>
					<image v-else :style="[randomColor(index)]" style="border: 2px solid #FFFFFF;" :src="item"
						class="iconImageView" mode="aspectFill">
					</image>

					<image v-if="selectedIndex == index" src="../../static/detail/detail_check.png" style="width: 20px;height: 20px;position: absolute;
					top: 0px;left: 0px;" mode="aspectFill">
					</image>
				</view>
			</view>
			<view @click="tapLoadMore()">
				<u-loadmore :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8" />
			</view>

			<view class="speaceLineView">

			</view>
			<view class="recommandBgView">
				<view class="recommandTitleView">
					推荐
				</view>
				<view class="itemListBgView" v-for="(item,index) in recommendDataList" :key="index"
					@click="itemClick(item)">
					<view class="doutuTitleBgView">
						<view class="doutuTitleBgView">
							<view
								style="align-items: center;display: flex;background: linear-gradient(to right,#FDEFB7,#ffffff);padding: 1px 27px 1px 0;">
								<image style="width: 30px;height: 15px;" src="../../static/detail/detail_album_vip.png"
									mode="">
								</image>
								<view
									style="font-size: 26rpx;color: black;font-weight: 400;flex-wrap: nowrap;margin-left: 3px;">
									{{item.title}}
								</view>
							</view>
							<view style="font-size: 24rpx;color: #A4A4A4;">
								更多
								<u-icon name="arrow-right" size="24"></u-icon>
							</view>
						</view>
					</view>
					<view class="doutuBgView">
						<view @click="detail(item.id)" v-for="(item, index) in item.imgs" :key="index">
							<image class="iconView" :src="item" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 在页面中定义激励视频广告
	let videoAd = null
	import Vue from 'vue';
	import API from '../../api/api.js';
	import {
		mapGetters,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				iconDetailInfo: null,
				placeHoldcolors: ['#8DC6D9', '#78C871', "#BE98C9", "#F2BDC7", "#96A8D0", "#D1EFCD", "#388F99", "#534EAA",
					"#CADF60", "#F2BDC7", "#BE98C9",
				],
				iconList: [],
				allIconList: [],
				selectedIndex: 0,
				firstShowCount: 16,
				loadStatus: 'nomore',
				recommendDataList: [],
				appIsAuthVersion: false,
				isColl: false,
				collStatus: false,
				loginShow: false,
				biaoqingCollection: [],
			}
		},
	
		onLoad(options) {
			this.appIsAuthVersion = Vue.prototype.appIsAuthVersion

			var item = JSON.parse(decodeURIComponent(options.item));
			console.log(item, 'xxxx');
			this.iconDetailInfo = item
			if (typeof(item.imgs) == 'string') {
				this.iconList = JSON.parse(item.imgs)
			} else {
				this.iconList = item.imgs
			}
			uni.setNavigationBarTitle({
				title: item.title
			})
			this.getRecommendList()

			var that = this
			var biaoqingCollection = uni.getStorageSync("biaoqingCollection")
			this.biaoqingCollection = biaoqingCollection
			console.log('biaoqingCollection:')
			console.log(biaoqingCollection)
			for (var i in biaoqingCollection) {
				var titem = biaoqingCollection[i]
				if (titem == that.iconList[that.selectedIndex]) {
					that.isColl = true
					break
				}
			}
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				type: 0,
				summary: "",
				imageUrl: this.iconList[this.selectedIndex]
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				type: 0,
				summary: "",
				imageUrl: this.iconList[this.selectedIndex],
				willDownloadImgurl: this.iconList[this.selectedIndex],
			}
		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login'
			}),
			randomColor(index) {
				return {
					background: this.placeHoldcolors[index % (this.placeHoldcolors.length - 1)]
				};
			},
			getRecommendList() {
				var alias = this.iconDetailInfo.tag.split(",")
				var searchVal = alias[parseInt(Math.random() * 10 % (alias.length))]
				if (alias.length > 0) {
					var that = this
					API.search(1, 4, searchVal, "tag", "emjio-list1").then(res => {
							for (var i in res) {
								var tmp = res[i]
								console.log(tmp)
								tmp['imgs'] = JSON.parse(tmp['imgs'])
								if (tmp['imgs'].length > 4) {
									tmp['imgs'] = tmp['imgs'].slice(0, 4)
								}
							}
							that.recommendDataList = res
						})
						.catch(err => {
							console.log(err)
						})
				}
			},
			tapLoadMore() {
				if (this.loadStatus == 'loadmore') {
					var canPushCount = this.firstShowCount
					for (var i in this.iconDetailInfo.imgs) {
						console.log(i)
						if (i > this.iconList.length - 1 && canPushCount > 0) {
							this.iconList.push(this.iconDetailInfo.imgs[i])
							canPushCount -= 1
						}
					}
					if (canPushCount > 0) {
						this.loadStatus = 'nomore'
					}
				}
			},
			tapSelectedIcon(index) {
				this.selectedIndex = index
				var that = this
				var biaoqingCollection = uni.getStorageSync("biaoqingCollection")
				this.biaoqingCollection = biaoqingCollection
				console.log(that.iconList[that.selectedIndex])
				console.log(biaoqingCollection)

				var isContain = false
				for (var i in biaoqingCollection) {
					var titem = biaoqingCollection[i]
					if (titem == that.iconList[that.selectedIndex]) {
						console.log('-------')
						isContain = true
						break
					}
				}
				that.isColl = isContain
			},
			previewImg() {
				var that = this
				uni.previewImage({
					urls: [that.iconList[that.selectedIndex]]
				})
			},
			sendImageToWechat() {
				try {
					uni.previewImage({
						urls: [t.iconList[that.selectedIndex]]
					})
				} catch (e) {
					// error
				}
			},
			//下载网络图片
			saveHttpImg(url) {
				console.log('---saveHttpImg--')
				console.log(url)
				this.willDownloadImgurl = url;
				this.beiginDownLoad(this.willDownloadImgurl)
			},
			beiginDownLoad(url) {
				uni.showLoading({
					title: "加载中"
				})
				let _t = this;
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: (res) => {
						uni.hideLoading()
						console.log(res)
						if (res.statusCode === 200) {
							let file = res.tempFilePath;
							_t.save(file)
						}
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "暂不支持下载"
						})
						uni.hideLoading()
					}
				});
			},
			//保存图片到本地
			save(url) {
				let _this = this;
				uni.showLoading({
					title: "保存中..."
				})
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: "图片已保存"
						})
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: "保存失败",
							icon: 'fail',
						})
					},
					complete: () => {

					}
				});
			},
			itemClick(item) {
				uni.navigateTo({
					url: '../emjioDetail/emjioDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			async shareTimeLine(url) {

			}
		}
	}
</script>

<style lang="scss">
	.headerBgView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px;
	}

	.selectedImageView {
		width: calc((100vw - 40px)/2);
		height: calc((100vw - 40px)/2);

		image {
			border-radius: 8px;
		}

		border-radius: 8px;
	}

	.titleView {
		height: 40px;
		display: block;
		font-size: larger;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 90%;
		overflow: hidden;
	}

	.headerActionBgView {
		display: flex;
		flex-direction: column;
		padding: 10px;
		width: calc((100vw - 60px)/2);
		align-items: center;
		justify-content: center;
	}

	.shareBgView {
		display: flex;
		flex-direction: row;
		width: 95%;
		background-color: #FBD944;
		height: 45px;
		line-height: 45px;
		border-radius: 22px;
		text-align: center;
		align-items: center;
		margin-bottom: 10px;
		justify-content: center;
		color: white;
		font-weight: bold;
	}

	.shareBgView image {
		width: 25px;
		height: 25px;
		margin-right: 5px;
	}

	.saveAndStoreView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 95%;
		height: 45px;
	}

	.storeImageView {
		padding: 10px;
		background-color: #FBD944;
		border-radius: 35px;
		display: flex;
		justify-content: center;
		position: relative;

		image {
			width: 25px;
			height: 25px;
		}
	}

	.saveImageView {
		margin-left: 10rpx;
		padding: 10px;
		background-color: #FBD944;
		border-radius: 35px;
		display: flex;
		justify-content: center;
		color: white;
		font-weight: bold;
		align-items: center;

		image {
			width: 25px;
			height: 25px;
			margin-right: 5px;
		}
	}

	.iconListBgView {
		margin: 8px 0 8px 8px;
		display: flex;
		flex-wrap: wrap;
	}

	.iconImageView {
		width: calc((100vw - 5*8px - 4*4px)/4);
		height: calc((100vw - 5*8px - 4*4px)/4);
		margin-right: 8px;
		border-radius: 8px;
	}

	.speaceLineView {
		height: 10px;
		line-height: 10px;
		background-color: #F6F7F9;
		width: 100%;
	}

	.itemListBgView {
		padding-top: 20rpx;
	}

	.doutuBgView {
		margin: 8px 0 8px 8px;
		display: flex;
		flex-direction: row;
	}

	.iconView {
		width: calc((100vw - 5*8px)/4);
		height: calc((100vw - 5*8px)/4);
		margin-right: 8px;
		border-radius: 8px;
	}

	.doutuTitleBgView {
		padding: 0 8px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.recommandTitleView {
		margin: 16rpx;
		font-size: larger;
		font-weight: 500;
		color: rgba(255, 196, 34, 1);
	}

	.shareBtnView {
		position: absolute;
		top: 0;
		left: 0;
		width: 46px;
		height: 46px;
		background: rgba(0, 0, 0, 0);
	}

	.shareBtnView::after {
		border: none;
	}
</style>